<template>
  <div>
    <div id="maychar"></div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, inject } from "vue"; // 主要
import service from "../../../utils/service";
export default defineComponent({
  setup() {
    onMounted(() => {
      service({
        url: "/data/kData",
      }).then((res) => {
        arr = res.data.data.x;
        arr1 = res.data.data.val;
        changetype();
      });
    });
    let echarts: any = inject("echarts"); // 主要
    let arr: any = [];
    let arr1: any = [];

    // 折线图
    const changetype = () => {
      // 获取组件实例
      const machart = echarts.init(document.getElementById("maychar"));
      // 设置配置项
      const option = {
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        legend: {
          data: ["苹果", "华为", "小米", "vivo"],
        },
        title: {
          text: "手机年销量数据展示",
          textStyle: {
            fontSize: 18,
            fontWeight: 400,
          },
          left: "center",
          top: "7%",
        },
        tooltip: {
          trigger: "axis",
        },

        xAxis: {
          data: arr,
        },
        yAxis: {},
        series: [
          {
            name: "苹果",
            data: arr1[0],
            type: "line",
          },
          {
            name: "华为",
            data: arr1[1],
            type: "line",
          },
          { name: "小米", data: arr1[2], type: "line" },
          {
            name: "vivo",
            data: arr1[3],
            type: "line",
          },
        ],
      };
      // 复制
      machart.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        machart.resize();
      });
    };
    return {
      changetype,
    };
  },
});
</script>
 
<style  scoped>
#maychar {
  max-height: 500px;
  max-height: 400px;
  height: 500px;
}
</style>
